<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
</head>
<body>
    <style>
        .grids {
            display: inline-grid;
            width: 630px;
            grid-template-columns:repeat(3, 1fr);
            grid-template-rows: 180px 260px 240px;
            grid-template-areas: 'a b c'
                       'd d e'
                       'f g g';
            text-align: center;
            font-size: 30px;
            color: #fff;
            background-color: black;
        }
        .a{
            background-color: aquamarine;
            grid-area: a;
            clip-path: polygon(100% 0%, 95% 95%,0% 100%, 0% 00%, 95% 0%);
            background: url(./img/4.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .b{
            background-color: rgb(179, 51, 121);
            grid-area: b;
            clip-path: polygon(100% 0%, 95% 90%,0% 95%, 5% 0%, 95% 0%);
            background: url(./img/2.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .c{
            background-color: yellow;
            grid-area: c;
            clip-path: polygon(100% 0%, 100% 85%,0% 90%, 5% 0%, 95% 0%);
            background: url(./img/3.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .d{
            background-color: rgb(75, 28, 161);
            grid-area: d;
            clip-path: polygon(100% 5%, 100% 90%,0% 100%, 0% 15%, 100% 5%);
            background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=795934161,50379971&fm=11&gp=0.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .e{
            background-color: green;
            grid-area: e;
            clip-path: polygon(100% 0%, 100% 85%,0% 90%, 0% 5%, 100% 0%);
            background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1110157243,2891229005&fm=26&gp=0.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .f{
            background-color: rgb(16, 42, 46);
            grid-area: f;
            clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 5%, 100% 0%);
            background: url(./img/1.jpg) no-repeat;
            background-size: 100% 100%;
        }
        .g{
            background-color: rgb(29, 216, 138);
            grid-area: g;
            clip-path: polygon(100% 10%, 100% 100%, 0% 100%, 0% 0%, 100% 0%);
            background: url(./img/5.jpg) no-repeat;
            background-size: 100% 100%;
        }
    </style>
    <div class="grids">
        <div class="gridson a"></div>
        <div class="gridson b"></div>
        <div class="gridson c"></div>
        <div class="gridson d"></div>
        <div class="gridson e"></div>
        <div class="gridson f"></div>
        <div class="gridson g"></div>
    </div>
<style>
    .grids {
        display: inline-grid;
        width: 630px;
        grid-template-columns:repeat(3, 1fr);
        grid-template-rows: 180px 260px 240px;
        grid-template-areas: 'a b c'
                    'd d e'
                    'f g g';
        text-align: center;
        font-size: 30px;
        color: #fff;
        background-color: black;
    }
    .a{
        background-color: aquamarine;
        grid-area: a;
        clip-path: polygon(100% 0%, 95% 95%,0% 100%, 0% 00%, 95% 0%);
        background: url(./img/4.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .b{
        background-color: rgb(179, 51, 121);
        grid-area: b;
        clip-path: polygon(100% 0%, 95% 90%,0% 95%, 5% 0%, 95% 0%);
        background: url(./img/2.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .c{
        background-color: yellow;
        grid-area: c;
        clip-path: polygon(100% 0%, 100% 85%,0% 90%, 5% 0%, 95% 0%);
        background: url(./img/3.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .d{
        background-color: rgb(75, 28, 161);
        grid-area: d;
        clip-path: polygon(100% 5%, 100% 90%,0% 100%, 0% 12%, 100% 5%);
        background: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=795934161,50379971&fm=11&gp=0.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .e{
        background-color: green;
        grid-area: e;
        clip-path: polygon(100% 2%, 100% 85%,0% 90%, 0% 5%, 100% 2%);
        background: url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1110157243,2891229005&fm=26&gp=0.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .f{
        background-color: rgb(16, 42, 46);
        grid-area: f;
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 5%, 100% 0%);
        background: url(./img/1.jpg) no-repeat;
        background-size: 100% 100%;
    }
    .g{
        background-color: rgb(29, 216, 138);
        grid-area: g;
        clip-path: polygon(100% 10%, 100% 100%, 0% 100%, 0% 0%, 100% 0%);
        background: url(./img/5.jpg) no-repeat;
        background-size: 100% 100%;
    }
</style>
<div class="grids">
    <div class="gridson a"></div>
    <div class="gridson b"></div>
    <div class="gridson c"></div>
    <div class="gridson d"></div>
    <div class="gridson e"></div>
    <div class="gridson f"></div>
    <div class="gridson g"></div>
</div>
    
</body>
</html>